<template>
  <div class="tabbar-wrap"  :class="isIphoneX? 'isIphoneX':''">
      <ul class="tabbar" >
           <li class="tabbar-item" v-for="(item, index) in navList" :key="index" @tap="selectNavItem(index, item.pagePath)" :class="item.isSpecial ? 'wrapSpecial':''">
              <image class='circle-bg' v-if='item.isSpecial' src='/static/images/tabbar_icon_repair_bg_selected@3x.png'/>
              <p class="tabbar-icon" >
                  <img alt="tabbar-icon" :src="selectNavIndex == index? item.selectedIconPath : item.iconPath" :class="item.isSpecial ? 'imgSpecial':''" />
              </p>
              <p class="tabbar-text" :class="selectNavIndex == index? 'active':''">
                  {{item.text}}
              </p>
          </li> 
      </ul>
  </div>
</template>
<script>
  export default {
    props: ['selectNavIndex'],
    data() {
      return {
        color: "#979795",
        selectedColor: "#297db9",
        navList: [
          {
            pagePath: "/pages/index/main",
            text: "首页",
            iconPath:"/static/images/icon_home.png",
            selectedIconPath:"/static/images/icon_home_HL.png"
          },
          {
            pagePath: "/pages/repair/main",
            iconPath: "/static/images/tabbar_icon_repair_default@3x.png",
            isSpecial: true,
            text: "报修"
          },
          {
            pagePath: "/pages/user/main",
            text: "我的",
            iconPath:"/static/images/icon_user.png",
            selectedIconPath:"/static/images/icon_user_HL.png"
          }
        ],
      }
    },
    methods: {
      selectNavItem(index, pagePath) {
        if (index === this.selectNavIndex) {
          return false;
        }
        this.bindNavigateTo(index,pagePath);
      },
      bindNavigateTo(index,url) {
        if(index==1){
          wx.navigateTo({
            url
          })
        }else{
          wx.switchTab({
            url
          })
        }
      },
    },
    computed: {
        isIphoneX(){
            return this.$store.getters.isIphoneX
        }
    }
  }
</script>
<style lang='less'>
.tabbar-wrap {
    position:fixed;
    bottom :0;
    left :0;
    height :92rpx;
    width :100%;
    padding-top: 6rpx;
    background: #fff;
    .tabbar{
        display:flex;
        width :100%;
        height :92rpx;
        .tabbar-item{
            display:flex;
            flex-direction: column;
            flex :1 ;
            height: 92rpx;
            .tabbar-icon{
                height :56rpx;
                text-align :center;
                position: relative;
                img{
                    width:56rpx;
                    height:56rpx; 
                }        
                img.imgSpecial{
                      width: 58rpx;
                      height:58rpx;
                      z-index:1;
                  }
            }
            .tabbar-text{
                  text-align:  center;
                  line-height : 36rpx;
                  color : #979795;
                  font-size : 22rpx
              } 
            .active{
                color:#297db9;
            } 
        }
        .wrapSpecial{
          .circle-bg{
            position:absolute;
            width:140rpx;
            height: 114rpx;
            top:-14rpx;
            left: 50%;
            margin-left:-70rpx;
            z-index: -1;
            color: #fff; 
          }
          .tabbar-text{
            color:#fff
          }
        }
        
    }        
}                 
                    

</style>